<template>
  <div style="padding: 20px">
    <h2 style="margin-bottom: 10px">{{ form.productionordersName }}</h2>
    <span
      >创建人：{{ form.head }}
      <span style="padding-left: 20px"
        >创建时间：{{ form.planStartTime.substring(0, 10) }}</span
      >
      <span style="padding-left: 20px">最后修改人：{{ form.head }}</span>
      <span style="padding-left: 20px"
        >修改时间：{{ form.planStartTime.substring(0, 10) }}</span
      >
    </span>
  </div>

  <div>
    <el-tabs v-model="activeTab" class="detail-tabs">
      <!-- 工单信息 -->
      <el-tab-pane label="工单信息:" name="info">
        <div
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid #e4e7ed;
            padding-bottom: 20px;
          "
        >
          <h3>基础信息</h3>
          <div style="display: flex; flex-wrap: wrap; margin-top: 20px">
            <el-form-item label="工单名称:" style="width: 50%">
              {{ form.productionordersName }}
            </el-form-item>
            <!-- 移除系统编号输入框 -->
            <el-form-item label="工单编号：" style="width: 50%">
              {{ form.productionordersNo }}
            </el-form-item>
            <el-form-item label="销售订单：" style="width: 50%">
              {{ form.orderNumber }}
            </el-form-item>
            <el-form-item label="关联生产单号：" style="width: 50%">
              {{ form.workOrderCoding }}
            </el-form-item>
            <el-form-item label="工单日期：" style="width: 50%">
              {{ form.productionordersTime }}
            </el-form-item>

            <el-form-item label="所属部门：" style="width: 50%">
              {{ form.head }}
            </el-form-item>
            <el-form-item label="负责人：" style="width: 50%">
              {{ form.department }}
            </el-form-item>
            <el-form-item label="备注：" style="width: 100%">
              {{ form.remark }}
            </el-form-item>
          </div>
        </div>
        <div
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid #e4e7ed;
            padding-bottom: 20px;
          "
        >
          <h3>生产物品</h3>
          <div style="display: flex; flex-wrap: wrap; margin-top: 20px">
            <el-form-item label="物品名称：" style="width: 50%">
              {{ materproduct.materialname }}
            </el-form-item>
            <el-form-item label="物品编号：" style="width: 50%">
              {{ materproduct.materialnumber }}
            </el-form-item>
            <el-form-item label="规格型号：" style="width: 50%">
              {{ materproduct.specification }}
            </el-form-item>
            <el-form-item label="单位：" style="width: 50%">
              {{ materproduct.unit }}
            </el-form-item>
            <el-form-item label="物品类别：" style="width: 50%">
              {{ materproduct.materialproduct }}
            </el-form-item>
            <!--   <el-form-item label="物品分类" style="width: 50%">
              {{}}
            </el-form-item> -->
            <el-form-item label="计划开始时间：" style="width: 50%">
              {{ materproduct.planStartTime.substring(0, 10) }}
            </el-form-item>
            <el-form-item label="计划结束时间：" style="width: 50%">
              {{ materproduct.planEndTime }}
            </el-form-item>
            <el-form-item label="计划产量：" style="width: 50%">
              {{ materproduct.yield }}
            </el-form-item>
          </div>
        </div>

        <div>
          <h3>工序流程</h3>
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-button type="primary" size="small" @click="getExelprocessList()"
            >导出</el-button
          >
          <el-table :data="processList" style="width: 100%; margin-top: 10px">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="processNo" label="工序编号" width="200" />
            <el-table-column prop="processName" label="工序名称" width="150" />
            <el-table-column prop="head" label="负责人" width="120" />
            <el-table-column prop="department" label="所在部门" width="120" />
            <el-table-column
              prop="planStartTime"
              label="计划开始时间"
              width="180"
            >
              <template #default="scope">
                {{ scope.row.planStartTime.substring(0, 10) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="planEndTime"
              label="计划结束时间"
              width="180"
            >
              <template #default="scope">
                {{ scope.row.planEndTime.substring(0, 10) }}
              </template>
            </el-table-column>
            <el-table-column prop="yield" label="计划产量" width="180" />
            <!--      <el-table-column label="操作" width="120"> </el-table-column> -->
            <el-table-column>
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="handleEdit(Eject.dialogFormhandleVisible)"
                  >报工</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <!-- 报工记录 -->
      <el-tab-pane label="报工记录" name="report" @change="getProcessList()">
        <div>
          <el-button type="primary" size="small" @click="getExelSigning()"
            >导出</el-button
          >
          <el-table :data="processList" style="width: 100%; margin-top: 10px">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="processNo" label="工序编号" width="200" />
            <el-table-column prop="processName" label="工序名称" width="150" />
            <el-table-column prop="head" label="负责人" width="120" />
            <el-table-column prop="department" label="所在部门" width="120" />
            <el-table-column
              prop="planStartTime"
              label="计划开始时间"
              width="180"
            >
              <template #default="scope">
                {{ scope.row.planStartTime.substring(0, 10) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="planEndTime"
              label="计划结束时间"
              width="180"
            >
              <template #default="scope">
                {{ scope.row.planEndTime.substring(0, 10) }}
              </template>
            </el-table-column>
            <el-table-column prop="yield" label="计划产量" width="180" />

            <el-table-column prop="goodproduct" label="合格数" width="200" />
            <el-table-column prop="notproduct" label="不合格数" width="200" />
            <el-table-column prop="zt" label="状态" width="200">
              <template #default="scope">
                {{ scope.row.zt == 0 ? "未质检" : "已质检" }}
              </template>
            </el-table-column>
            <el-table-column prop="zt" label="操作" width="200">
              <template #default="scope">
                <el-button
                  type="primary"
                  @click="updataproduction(scope.row.woekderProessId)"
                  >质检</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <!-- 操作记录 -->
      <el-tab-pane label="操作记录" name="operation">
        <el-button type="primary" size="small" @click="Execlworkopen()"
          >导出</el-button
        >
        <el-table :data="open" style="width: 100%; margin-top: 10px">
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column prop="fzr" label="操作人" width="180" />
          <el-table-column prop="createTime" label="操作时间" width="180">
            <template #default="scope">
              {{ scope.row.createTime.substring(0, 10) }}
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            v-model:current-page="pages.PageIndex"
            v-model:page-size="pages.PageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <div></div>
    </el-tabs>
  </div>

  <!-- 质检弹出框 -->
  <div>
    <el-dialog
      title="质检"
      v-model="Eject.dialogFormVisible"
      style="margin-right: 80px"
      width="1200px"
    >
      <el-form :model="workprorduproc">
        <el-form-item label="工序编号" :label-width="Eject.formLabelWidth">
          {{ workprorduproc.processNo }}
        </el-form-item>
        <el-form-item label="工序名称" :label-width="Eject.formLabelWidth">
          {{ workprorduproc.processName }}
        </el-form-item>
        <el-form-item label="负责人" :label-width="Eject.formLabelWidth">
          {{ workprorduproc.head }}
        </el-form-item>
        <el-form-item label="所在部门" :label-width="Eject.formLabelWidth">
          {{ workprorduproc.department }}
        </el-form-item>
        <el-form-item label="生产人员:" :label-width="Eject.formLabelWidth">
          {{ workprorduproc.fzr }}
        </el-form-item>
        <el-form-item label="合格数量:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="upworkpros.goodproduct"
            style="width: 200px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="不良数量:" :label-width="Eject.formLabelWidth">
          <el-input
            v-model="upworkpros.notproduct"
            autocomplete="off"
            style="width: 200px"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer="scope">
        <div class="dialog-footer">
          <el-button @click="Eject.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updatawork()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <div>
    <el-dialog
      title="报工"
      v-model="Eject.dialogFormhandleVisible"
      style="margin-right: 80px"
      width="1200px"
    >
      <el-form-item label="工序编号:" style="width: 50%">
        {{ newslist.processNo }}
      </el-form-item>
      <el-form-item label="负责人:" style="width: 50%">
        {{ newslist.head }}
      </el-form-item>
      <el-form-item label="所在部门:" style="width: 50%">
        {{ newslist.goodproduct }}
      </el-form-item>
      <div class="header">
        <button class="btn add" @click="addRow">添加</button>
        <button class="btn remove" @click="removeRows">移除</button>
      </div>
      <table class="data-table">
        <thead>
          <tr>
            <th></th>
            <th>序号</th>
            <th>部门</th>
            <th>人员</th>
            <th>报工数量</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(row, index) in tableData"
            :class="{ 'even-row': index % 2 === 0 }"
          >
            <td><input type="checkbox" v-model="row.selected" /></td>
            <td>{{ row.id }}</td>
            <td>
              <select v-model="row.department">
                <option value="">请选择部门</option>
                <option v-for="dept in departments" :key="dept" :value="dept">
                  {{ dept }}
                </option>
              </select>
            </td>
            <td>
              <select v-model="row.person">
                <option value="">请选择人员</option>
                <option v-for="person in people" :key="person" :value="person">
                  {{ person }}
                </option>
              </select>
            </td>
            <td>
              <input type="text" v-model="row.quantity" placeholder="请输入" />
            </td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { readaxios, writeaxios } from "@/https/axioshttps";
import axios from "axios";

const selectedSupplierProcessId = ref<number | null>(null);
const router = useRouter();
const route = useRoute();
// 选项卡切换逻辑
const activeTab = ref("info"); // 默认显示工单信息
// 获取生产工单列表字段
const form = reactive({
  productionordersId: 0,
  productionordersNo: "",
  productionordersName: "",
  topic: "",
  head: "",
  department: "",
  ProductionordersStatus: null,
  planStartTime: "",
  planEndTime: "",
  yield: "",
  remark: "",
  isDelete: false,
  mId: 0,
  workOrderId: 0,
  productionordersTime: new Date(),
  processID: 0,
  autoGenerate: false,
  orderNumber: "",
  workOrderCoding: "",
});
const model = reactive({
  materialnumber: "",
  materialname: "",
  specification: "",
  unit: "",
  materialproduct: "",
  sort: "",
});

const workOrder = reactive({
  workOrderId: 0,
  workOrderCoding: "",
  orderNumber: "",
});
// 显示工序
const page = reactive({
  PageIndex: 1,
  PageSize: 10,
  totalCount: 1,
  totalPage: 1,
});

//生命周期钩子
onMounted(() => {
  getdetails();
});

// 生产工单-详情
const getdetails = () => {
  axios
    .get("http://localhost:5056/api/Productionorderss/GetProductiondetails", {
      params: {
        woekderProessId: route.query.woekderProessId,
      },
    })
    .then((res) => {
      console.log(res.data);
      form.productionordersId = res.data.data[0].productionordersId;
      form.productionordersNo = res.data.data[0].productionordersNo;
      form.productionordersName = res.data.data[0].productionordersName;
      form.orderNumber = res.data.data[0].orderNumber;
      form.workOrderCoding = res.data.data[0].workOrderCoding;
      form.productionordersTime = res.data.data[0].productionordersTime;
      form.head = res.data.data[0].head;
      form.department = res.data.data[0].department;
      form.remark = res.data.data[0].remark;
      form.mId = res.data.data[0].mId;
      form.processID = res.data.data[0].processID;
      form.planStartTime = res.data.data[0].planStartTime;
      form.planEndTime = res.data.data[0].planEndTime;

      getmaterproduct(form.productionordersId);
    });
};

const materproduct = reactive({
  mId: 0,
  materialnumber: "",
  materialname: "",
  specification: "",
  unit: 0,
  materialproduct: 0,
  sort: 0,
  productionordersId: 0,
  planStartTime: "",
  planEndTime: "",
  yield: "0",
});
// 生产物料-详情
const maters = ref([]);
const getmaterproduct = (value: any) => {
  axios
    .get(
      "http://localhost:5056/api/Productionorderss/GetMaterialmanagementProduction",
      {
        params: {
          productionordersId: value,
        },
      }
    )

    .then((res) => {
      materproduct.mId = res.data.data[0].mId;
      materproduct.materialnumber = res.data.data[0].materialnumber;
      materproduct.materialname = res.data.data[0].materialname;
      materproduct.specification = res.data.data[0].specification;
      materproduct.unit = res.data.data[0].unit;
      materproduct.materialproduct = res.data.data[0].materialproduct;
      materproduct.sort = res.data.data[0].sort;
      materproduct.productionordersId = res.data.data[0].productionordersId;
      materproduct.planStartTime = res.data.data[0].planStartTime;
      maters.value = res.data.data;

      console.log(res.data.data, "生产物料-详情");
      getProcessList();
    });
};

//获取工序流程-工单信息:详情
const processList = ref([]);
const getProcessList = () => {
  axios
    .get("http://localhost:5056/api/Productionorderss/GetWorkProcessMater", {
      params: {
        woekderProessId: route.query.woekderProessId,
      },
    })
    .then((res) => {
      processList.value = res.data.data;
      console.log(res.data, "工序流程-工单信息:详情6767");
    });
};
const workprorduproc = reactive({
  processID: 0,
  processNo: "",
  processName: "",
  processdescris: "",
  productionordersId: 0,
  planStartTime: "",
  planEndTime: "",
  yield: 0,
  head: "",
  department: "",
  woekderProessId: route.query.woekderProessId,
  zt: false,
  goodproduct: 0,
  notproduct: 0,
  fzr: "",
  createTime: "",
});

//详情---报工记录
const Eject = reactive({
  dialogFormVisible: false, //新增弹出框
  dialogFormhandleVisible: false, //新增弹出框
  formLabelWidth: "120px",

  Isture: true,
});

const updataproduction = (woekderProessId: number) => {
  alert(woekderProessId);
  Eject.dialogFormVisible = true;

  axios
    .get("http://localhost:5056/api/Productionorderss/GetWorkProcessMater", {
      params: { woekderProessId: woekderProessId },
    })
    .then((res) => {
      console.log(res.data.data, "工序流程-工单信息:详情000000");
      //  woekderProessId.value = res.data.data.woekderProessId;
      workprorduproc.processNo = res.data.data[0].processNo;
      workprorduproc.processName = res.data.data[0].processName;
      workprorduproc.head = res.data.data[0].head;
      workprorduproc.department = res.data.data[0].department;
      workprorduproc.yield = res.data.data[0].yield;
      /*   workprorduproc.goodproduct = res.data.data[0].goodproduct;
      workprorduproc.notproduct = res.data.data[0].notproduct; */
      workprorduproc.fzr = res.data.data[0].fzr;
      workprorduproc.createTime = res.data.data[0].createTime;
      workprorduproc.planStartTime = res.data.data[0].planStartTime;
      getworkopen();
    });
};

const upworkpros = reactive({
  woekderProessId: route.query.woekderProessId,
  productionordersId: 0,
  processID: 0,
  zt: true,
  goodproduct: 0,
  notproduct: 0,
  fzr: "",
  createTime: new Date(),
  mId: 0,
  workOrderId: 0,
});

//修改质检状态
const updatawork = () => {
  axios
    .put(
      "http://localhost:5057/api/Productionorderss/CreateWorkderupdataZt",
      upworkpros
    )
    .then((res) => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        Eject.dialogFormVisible = false;
        getProcessList();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};

const pages = reactive({
  PageSize: 10,
  PageIndex: 1,
  totalCount: 1,
  totalPage: 1,
});

const open = ref([]);
const getworkopen = () => {
  axios
    .get("http://localhost:5056/api/Productionorderss/GetWorkoperate", {
      params: pages,
    })
    .then((res) => {
      console.log(res.data.data, "操作记录2222");
      open.value = res.data.data;
      pages.totalCount = res.data.totalCount;
      pages.totalPage = res.data.totalPage;
    });
};

// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pages.PageSize = val;
  getworkopen();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pages.PageIndex = val;
  getworkopen();
};

// 导出工序流程信息
const getExelprocessList = () => {
  let url = "http://localhost:5056/api/Productionorderss/ExelprocessList";
  window.location.href = url;
  getProcessList(); // 重新获取数据
};

//导出报工数据
const getExelSigning = () => {
  let url = "http://localhost:5056/api/Productionorderss/ExelSigning";
  window.location.href = url;
  getProcessList(); // 重新获取数据
};

//导出操作记录
const Execlworkopen = () => {
  let url = "http://localhost:5056/api/Productionorderss/Execlworkopen";
  window.location.href = url;
  getworkopen(); // 重新获取数据
};

//报工记录
const handleEdit = () => {
  Eject.dialogFormhandleVisible = true;
  gethandledit();
};
const newslist = ref({
  head: "",
  processNo: "",
  goodproduct: "",
});
const gethandledit = () => {
    axios
    .get("http://localhost:5056/api/Productionorderss/GetWorkProcessMater", {
      params: {
        woekderProessId: route.query.woekderProessId,
      },
    })
    .then((res) => {
      newslist.value = res.data.data;
      newslist.value.head = res.data.data[0].head;
      newslist.value.processNo = res.data.data[0].processNo;
      newslist.value.goodproduct = res.data.data[0].goodproduct;
     console.log(newslist.value.head,"head3354");
    });
};

// 部门选项
const departments = ref(["生产部", "技术部", "财务部", "人事部"]);
// 人员选项
const people = ref(["张三", "admin", "王五", "赵六"]);
// 表格数据
const tableData = ref([]);
let rowId = 1;
// 添加新行
const addRow = () => {
  tableData.value.push({
    id: rowId++,
    selected: false,
    department: "",
    person: "",
    quantity: "",
  });
};

// 移除选中行
const removeRows = () => {
  tableData.value = tableData.value.filter((row) => !row.selected);
  tableData.value.forEach((row, index) => {
    row.id = index + 1;
  });
  rowId = tableData.value.length + 1; // 更新 rowId
};
</script>

<style scoped>
.container {
  padding: 20px;
  background: white;
}

.header {
  margin-bottom: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.add {
  background-color: #409eff;
  color: white;
}

.remove {
  background-color: #e6a23c;
  color: white;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border: 1px solid #ebeef5;
  text-align: left;
}

th {
  background-color: #f5f7fa;
}

.even-row {
  background-color: #fafafa;
}

select, input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

select:focus, input[type="text"]:focus {
  outline: none;
  border-color: #409eff;
}
</style>